<script lang="ts" setup>
import { ref } from "vue";
import UnreadDetailDialog from "./UnreadDetailDialog.vue";

const dialogVisible = ref(false);
const handleClick = () => {
  dialogVisible.value = true;
};
</script>

<template>
  <el-badge
    :value="$store.state.xmleditor.unreadCount || ''"
    class="badge"
    @click.native="handleClick"
  >
    <i class="el-icon-message-solid"></i>

    <unread-detail-dialog
      :visible="dialogVisible"
      @close="dialogVisible = false"
      @click.native.stop
    />
  </el-badge>
</template>
<style lang="scss" scoped>
.badge {
  height: 60px;
  line-height: 25px;
  font-size: 22px;
  margin: 0 12px;
  cursor: pointer;
  color: #5a5e66;
}
</style>
